import React,{Fragment,useState,useEffect} from "react";
import {NavLink,} from 'react-router-dom'
import axios from "axios";

import style from './index.module.css'

const {bar,bar_one,bar_two,bar_three,bar_four,redDot} = style

export default function Bar(){

    const [cartLength,setCartLength] = useState(0)

    //购物车页面的实名认证跳转组件是否应该显示
    //用户已经认证了 或者 购物车内没有商品时 都不显示
    //默认用户是会员
    const [isShowRealName,setIsShowRealName] = useState(true)

    useEffect(()=>{

        axios.get('/api/shoppingCart')
            .then(res=>{
                setCartLength(res.data.shoppingCart.length)
                axios.get('/api/user_information')
                    .then(result=>{
                        // 用户为会员或者购物车
                        if(result.data.realName || res.data.shoppingCart.length === 0) setIsShowRealName(false)
                    })
            })
            .catch(error=>{
                console.log(error);
            })

        const pub = PubSub.subscribe('cartLength',(message,data:number)=>{
            setCartLength(data)
        })
        return ()=>{
            PubSub.unsubscribe(pub)
        }
    },[])

    return (
        <Fragment>
            <ul className={bar}>
                <NavLink to='/home/frontpage' activeClassName={bar_one}>
                    首页
                </NavLink>
                <NavLink to='/home/classification' activeClassName={bar_two}>
                    分类
                </NavLink>
                <NavLink to={{pathname:'/home/shopping_cart',state:isShowRealName}} activeClassName={bar_three}>
                    {
                        cartLength >= 1 &&
                        <div className={redDot}>{cartLength}</div>
                    }
                    购物车
                </NavLink>
                <NavLink to='/home/my' activeClassName={bar_four}>
                    我的
                </NavLink>
            </ul>
            {/* 占位使用，bar 的定位不占用空间 会导致遮挡 */}
            <div style={{height: 10 + 'rem'}}/>
        </Fragment>
    )
}